<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">


    <!-- Metas -->
    <title>curtains.js | Documentation | PingPongPlane class</title>
    <meta name="description" content="curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.">
    <link rel="canonical" href="https://www.curtainsjs.com/ping-pong-plane-class.html">

    <!-- Facebook OG -->
    <meta property="og:title" content="curtains.js | Documentation | PingPongPlane class">
    <meta property="og:type" content="website">
    <meta property="og:description" content="curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.">
    <meta property="og:url" content="https://www.curtainsjs.com/ping-pong-plane-class.html">
    <meta property="og:image" content="https://www.curtainsjs.com/images/curtains-js-logo.jpg">

    <!-- Twitter card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@martinlaxenaire">
    <meta name="twitter:creator" content="@martinlaxenaire">
    <meta name="twitter:title" content="curtains.js | Documentation | PingPongPlane class">
    <meta name="twitter:description" content="curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.">
    <meta name="twitter:image" content="https://www.curtainsjs.com/images/curtains-js-logo.jpg">

    <!-- Favicon -->
    <link rel="apple-touch-icon" sizes="180x180" href="images/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="images/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="images/favicons/favicon-16x16.png">
    <link rel="manifest" href="images/favicons/site.webmanifest">
    <link rel="mask-icon" href="images/favicons/safari-pinned-tab.svg" color="#202340">
    <link rel="shortcut icon" href="images/favicons/favicon.ico">
    <meta name="msapplication-TileColor" content="#202340">
    <meta name="msapplication-config" content="images/favicons/browserconfig.xml">
    <meta name="theme-color" content="#202340">

    <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="page-wrap">

    <div id="canvas"></div>

    <div id="content">

        <header id="header">
            <div class="wrapper">
                <div id="header-wrapper" class="flex-wrapper">
                    <div id="header-title">
                        <a href="/" title="Home">curtains.js</a>
                    </div>
                    <nav id="main-menu">
                        <ul class="flex-wrapper">
                            <li>
                                <a href="get-started.html">Get started</a>
                            </li>
                            <li>
                                <a href="documentation.html" class="active">Docs</a>
                            </li>
                            <li>
                                <a href="download.html">Download</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>

        <section class="content-section api-section">

            <nav id="api-menu-nav">
                <ul id="api-menu">
                    <li>
                        <div class="api-top-menu-item">Core</div>
                        <ul class="api-submenu-content">
                            <li>
                                <a href="curtains-class.html">Curtains</a>
                            </li>
                            <li>
                                <a href="plane-class.html">Plane</a>
                            </li>
                            <li>
                                <a href="texture-class.html">Texture</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="api-top-menu-item">Frame Buffer Objects</div>
                        <ul class="api-submenu-content">
                            <li>
                                <a href="render-target-class.html">RenderTarget</a>
                            </li>
                            <li>
                                <a href="shader-pass-class.html">ShaderPass</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="api-top-menu-item">Loaders</div>
                        <ul class="api-submenu-content">
                            <li>
                                <a href="texture-loader-class.html">TextureLoader</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="api-top-menu-item">Math</div>
                        <ul class="api-submenu-content">
                            <li>
                                <a href="vec-2-class.html">Vec2</a>
                            </li>
                            <li>
                                <a href="vec-3-class.html">Vec3</a>
                            </li>
                            <li>
                                <a href="mat-4-class.html">Mat4</a>
                            </li>
                            <li>
                                <a href="quat-class.html">Quat</a>
                            </li>
                        </ul>
                    </li>
                    <li class="active">
                        <div class="api-top-menu-item">Extras</div>
                        <ul class="api-submenu-content">
                            <li class="active">
                                <a href="ping-pong-plane-class.html">PingPongPlane</a>

                                <div class="api-submenu-content">
                                    <div class="api-submenu-title">
                                        <a href="ping-pong-plane-class.html#basic-usage">Basic usage</a>
                                    </div>
                                    <div class="api-submenu-title">
                                        <a href="ping-pong-plane-class.html#parameters">Parameters</a>
                                    </div>
                                    <div class="api-submenu-title">
                                        <a href="ping-pong-plane-class.html#properties">Properties</a>
                                    </div>
                                    <ul class="api-submenu">
                                        <li>
                                            <a href="ping-pong-plane-class.html#read-pass">readPass</a>
                                        </li>
                                        <li>
                                            <a href="ping-pong-plane-class.html#write-pass">writePass</a>
                                        </li>
                                    </ul>
                                    <div class="api-submenu-title">
                                        <a href="ping-pong-plane-class.html#methods">Methods</a>
                                    </div>
                                    <ul class="api-submenu">
                                        <li>
                                            <a href="ping-pong-plane-class.html#get-texture">getTexture</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <a href="fxaa-pass-class.html">FXAAPass</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>

            <div id="api-content">

                <div class="api-content-inner">
                    <div class="inner-section">
                        <h1>PingPongPlane class</h1>

                        <div class="api-item-examples">
                            <a href="https://github.com/martinlaxenaire/curtainsjs/blob/master/src/extras/PingPongPlane.js" title="PingPongPlane class source code" target="_blank">Source code</a>
                        </div>

                        <h2 id="basic-usage">Basic usage</h2>
                        <p>
                            The PingPongPlane class is used to create a plane and two associated render targets that will be swapped at each draw call. This method is called FBO swapping or FBO ping pong and is often used to create fluids or flowmaps effects.<br />
                            The PingPongPlane class <strong>extends</strong> the <a href="plane-class.html">Plane</a> class, inheriting from all its methods and properties.
                        </p>
                        <h3>Creation</h3>
                        <p>
                            To create a new PingPongPlane, just use its constructor.<br />
                            Since they inherit from the Plane class, parameters are almost the same. There's <strong>an additional parameter that allows you to set the PingPongPlane's texture sampler name</strong> that you will read in your fragment shader to apply your effect. If ommited, it will use "uPingPongTexture" as sampler name.<br />
                           Note that the ping pong planes are rendered onto render targets so you will have to create another plane to display the result of your effect.
                        </p>

                        <div class="code">

                            <div class="code-block">
                                <div class="code-comment">
                                    // "canvas" is the ID of our HTML container element
                                </div>
                                <div>
                                    <span class="code-var">const</span> curtains = <span class="code-var">new</span> <span class="code-tag">Curtains</span>({<div class="code-indent"><span class="code-property">container</span>: <span class="code-string">"canvas"</span></div>})<span class="code-var">;</span>
                                </div>
                            </div>

                            <div class="code-block">
                                <span class="code-var">const</span> pingPongPlaneElement = document.<span class="code-tag">getElementById</span>(<span class="code-string">"my-ping-pong-plane"</span>)<span class="code-var">;</span>
                            </div>

                            <div class="code-block">
                                <div>
                                    <span class="code-var">const</span> params = {
                                </div>
                                <div class="code-indent">
                                    <div>
                                        <span class="code-property">vertexShaderID</span>: <span class="code-string">"ping-pong-vs"</span><span class="code-var">,</span> <span class="code-comment">// ID of your vertex shader script tag</span>
                                    </div>
                                    <div>
                                        <span class="code-property">fragmentShaderID</span>: <span class="code-string">"ping-pong-fs"</span><span class="code-var">,</span> <span class="code-comment">// ID of your fragment shader script tag</span>
                                    </div>
                                    <div>
                                        <span class="code-property">sampler</span>: <span class="code-string">"uTexture"</span><span class="code-var">,</span> <span class="code-comment">// sampler to use in your fragment shader. Default to "uPingPongTexture"</span>
                                    </div>
                                    <div>
                                        <span class="code-property">uniforms</span>: { <span class="code-comment">// uniforms are what will allow you to interact with your plane</span>
                                    </div>
                                    <div class="code-indent">
                                        <div>
                                            <span class="code-property">time</span>: {
                                        </div>
                                        <div class="code-indent">
                                            <div>
                                                <span class="code-property">name</span>: <span class="code-string">"uTime"</span><span class="code-var">,</span> <span class="code-comment">// uniform name that will be passed to our shaders</span>
                                            </div>
                                            <div>
                                                <span class="code-property">type</span>: <span class="code-string">"1f"</span><span class="code-var">,</span> <span class="code-comment">// this means our uniform is a float</span>
                                            </div>
                                            <div>
                                                <span class="code-property">value</span>: <span class="code-number">0</span><span class="code-var">,</span> <span class="code-comment">// initial value of the uniform</span>
                                            </div>
                                        </div>
                                        <div>
                                            }<span class="code-var">,</span>
                                        </div>
                                    </div>
                                    <div>
                                        }<span class="code-var">,</span>
                                    </div>
                                </div>
                                <div>
                                    }<span class="code-var">;</span>
                                </div>
                            </div>

                            <div class="code-block">
                                <div class="code-comment">
                                    // create our ping pong plane with the above parameters
                                </div>
                                <div>
                                    <span class="code-var">const</span> pingPongPlane = <span class="code-var">new</span> <span class="code-tag">PingPongPlane</span>(curtains<span class="code-var">,</span> pingPongPlaneElement<span class="code-var">,</span> params)<span class="code-var">;</span>
                                </div>
                            </div>

                            <div class="code-block">
                                <div class="code-comment">
                                    // create a plane to use our ping pong plane effect
                                </div>
                                <span class="code-var">const</span> planeElement = document.<span class="code-tag">getElementById</span>(<span class="code-string">"my-plane"</span>)<span class="code-var">;</span>
                            </div>

                            <div class="code-block">
                                <span class="code-var">const</span> plane = <span class="code-var">new</span> <span class="code-tag">Plane</span>(curtains<span class="code-var">,</span> planeElement)<span class="code-var">;</span>
                            </div>

                            <div>
                                <div class="code-comment">
                                    // create a texture that will contain the result of our ping pong effect
                                </div>
                                <span class="code-var">const</span> pingPongTexture = plane.<span class="code-tag">createTexture</span>({
                                <div class="code-indent">
                                    <div>
                                        <span class="code-property">sampler</span>: <span class="code-string">"uTexture"</span><span class="code-var">,</span>
                                    </div>
                                    <div>
                                        <span class="code-property">fromTexture</span>: pingPongPlane.<span class="code-tag">getTexture</span>()
                                    </div>
                                </div>})<span class="code-var">;</span>
                            </div>
                        </div>

                        <p>
                            Have a look at the <a href="examples/ping-pong-shading-flowmap/index.html" title="Ping pong shading flowmap" target="_blank">Ping pong shading flowmap</a> example to see it live.
                        </p>

                        <h2 id="parameters">Parameters</h2>

                        <p>
                            PingPongPlanes use the same <a href="plane-class.html#parameters">parameters</a> as the usual Planes. Note however that it will set the <strong>depthTest</strong> and <strong>autoloadSources</strong> to <strong>false</strong>.<br />
                            You can also pass a sampler name as an additional parameter:
                        </p>

                        <ul class="api-item-parameters">
                            <li>
                                <span class="api-item-parameter-label">
                                    sampler
                                </span>
                                <span class="api-item-parameter-type">
                                    string, optional
                                </span>
                                <span class="api-item-parameter-desc">
                                    the texture sampler name you'll use in your fragment shader to create your effect. Default to "uPingPongTexture".
                                </span>
                            </li>
                        </ul>

                        <h2 id="properties">Properties</h2>

                        <p>
                            PingPongPlanes also have the same <a href="plane-class.html#properties">properties</a> as the usual Planes. Their two render targets are also availables as additional properties:
                        </p>

                        <ul>
                            <li id="read-pass">
                                <p>
                                    <strong>readPass</strong> (<a href="render-target-class.html">RenderTarget</a> class object): <span class="api-item-version">v7.0</span>
                                </p>
                                <p>
                                    Render target read pass that will be swapped with the write pass at each draw call. Its <strong>depth</strong> and <strong>clear</strong> properties are set to <strong>false</strong>.
                                </p>
                            </li>
                            <li id="write-pass">
                                <p>
                                    <strong>writePass</strong> (<a href="render-target-class.html">RenderTarget</a> class object): <span class="api-item-version">v7.0</span>
                                </p>
                                <p>
                                    Render target write pass that will be swapped with the read pass at each draw call. Its <strong>depth</strong> and <strong>clear</strong> properties are set to <strong>false</strong>.
                                </p>
                            </li>
                        </ul>

                        <h2 id="methods">Methods</h2>
                        <ul>
                            <li id="get-texture">
                                <p>
                                    <strong>getTexture</strong>(): <span class="api-item-version">v7.0</span>
                                </p>
                                <p>
                                    Returns the ping pong plane texture to be used later.
                                </p>
                                <p>
                                    <strong>returns:</strong> the ping pong plane <a href="texture-class.html">texture</a>.
                                </p>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>

        </section>
    </div>
</div>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-141413267-1"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-141413267-1');
</script>

</body>
</html>